<template>
    <div class="border">
        <h1>视频列表</h1>
        <ul>
            <li v-for="(item,index) in videos" :key="`${item.id}_${index}`">
                <router-link :to="`/video/${item.id}`">{{ item.title }}</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        name:"videos",
        data(){
            return{
                videos:[
                    {id:1,title:'齐木楠雄的灾难',source:"bilibili", description:'超能同学经在我身边'},
                    {id:2,title:'干物妹小埋',source:"Tencent", description:'来五毛钱的wifi'},
                    {id:3,title:'一面之词', source:"Tencent",description:'关于面条的纪录片'},
                    {id:4,title:'流浪地球',source:"bilibili", description:'拯救地球之战'},
                    {id:5,title:'宝可梦：皮卡丘和卡卡的毛线', source:"Google",description:'就决定是你了'},
                ]
            }
        }
    }
</script>
<style scoped>
.border{
    border: 1px solid black;
}
</style>